<template>
	<view class="content">
		<video style="width: 100vw;height: 100vh;" id="localVideo" ref="localVideo" src="videosrc" controls autoplay="autoplay"></video>
		
	</view>
</template>

<script>
	var ws = new WebSocket('ws://localhost:3030');	
	export default {
		data() {
			return {
				title: 'Hello',
				wsKey: null,
				peerListObject: {},
				stream: null,
				localStream: null,
				peerConnA: null,
				peerConnB: null,
				localVideo: null,
				videosrc: null
			}
		},
		onReady() {
			let remoteVideo = document.querySelector("#localVideo video")
			let tempTimer = setInterval(() => {
				if(remoteVideo.currentTime > 0){
					clearInterval(tempTimer)
					isPlaying = true
				}
			}, 1000)
		},
		onLoad() {
			const self = this
			this.localVideo = uni.createVideoContext('localVideo')
			self.createPeerB()
			ws.onopen = function(evt) {
				
				ws.send(JSON.stringify({type: 'watcher'}))
				
				self.listenMessage()
				// self.initStream()
			};
		},
		methods: {
			
			async peerBCreateAnswer(desc){
				const self = this
				// 设置远程描述
				try{
					await self.peerConnB.setRemoteDescription(desc)
					// self.onSetRemoteSuccess(peerConnB)
				}catch (e) {
					console.log(e)
				}
			
				// 创建answer
				try{
					const answer = await self.peerConnB.createAnswer( )
					self.onCreateAnswerSuccess(answer)
				}catch (e) {
					console.log(e)
				}
			
			},
			
			createPeerB(){
				let configuration = {"iceServer": [{"url": "stun: stun.l.google.com:19302"}]}
				const self = this
				self.peerConnB = new RTCPeerConnection(configuration)
				self.peerConnB.addEventListener('icecandidate', self.onIceCandidDateB)
				self.peerConnB.addEventListener('iceconnectionstatechange', self.onIceStateChangeB)
				// 获取到远端流
				self.peerConnB.addEventListener('track', self.gotRemoteStream)
			},
			async onIceCandidDateB(evt){
				const self = this
				try{
					if(evt.candidate){
						let candObj = JSON.stringify({
							type: 'candidateToA',
							data: evt.candidate,
							key: self.wsKey
						})
						ws.send(candObj)
					}
				}catch (e){console.log(e)}
			},
			async onIceStateChangeB(){
				console.log('onIceStateChangeBonIceStateChangeBonIceStateChangeB')
			},
			gotRemoteStream(e){
				let remoteVideo = document.querySelector("#localVideo video")
				console.log(e,'==')
				if(remoteVideo.srcObject != e.streams[0]){
					remoteVideo.srcObject = e.streams[0]
					remoteVideo.play()
				}
			},
			async candidateToB(data){
				const self = this
				try{
					await self.peerConnB.addIceCandidate(data)
					// self.onAddIceCandidateSuccess(self.peerConnB)
				}catch (e){}
			},
			async onCreateAnswerSuccess(desc){
				const self = this
				try{
					await self.peerConnB.setLocalDescription(desc)
			
					let obj = JSON.stringify({
						type: 'createAnswer',
						data: desc,
						key: self.wsKey
					})
					ws.send(obj)
			
				}catch (e) {
					console.log(e)
				}
			
			},
			
			listenMessage(){
				const self = this
				ws.onmessage = function(evt) {
					let tempData = JSON.parse(evt.data)
					// if(self.isPlaying) return
					console.log(tempData.type)
					switch (tempData.type){
						case 'createAnswer':
							self.peerBCreateAnswer(tempData.data)
							break
						case 'candidateToB':
							self.candidateToB(tempData.data)
							break
						case "backKey":
							self.wsKey = tempData.data
							break
					}
				};
				
				ws.onclose = function(evt) {
					console.log('Connection closed.');
				};
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
